<template>
    <el-dialog v-model="props.isShow" title="请确认" :close-on-click-modal="false" :close-on-press-escape="false"
        :before-close="close" class="dialogs">
        <template #header>
            <span style="display: flex;width: 100%;align-items: center;justify-content: center;">请确认</span>
        </template>
        <div class="items"><span class="label-info">您要请领的是：</span>{{ props.rows.name }}</div>
        <div class="items"><span class="label-info">存放位置：</span>{{ props.rows.storageLocation }}</div>
        <div class="items"><span class="label-info">现在库存：</span>{{ props.rows.inventoryNum }}</div>
        <div class="items"><span class="label-info redIcon">请领人：</span><el-input style="width: 200px;" placeholder="输入请领人"
                v-model="borrowPeople" :min="1" :max="props.rows.inventoryNum" /></div>
        <div class="items"><span class="label-info">请领数量：</span><el-input-number style="width: 200px;"
                v-model="borrowNum" :min="1" :max="props.rows.inventoryNum" /></div>
        <div class="items"><span class="label-info">请领天数：</span><el-input-number style="width: 200px;"
                v-model="borrowDay" :min="1" /></div>
        <div class="footer">
            <el-button @click="confirm" type="primary">确 定</el-button>
            <el-button @click="close" type="default">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const emits = defineEmits(['close', 'confirm']);
const props = defineProps<{ isShow: boolean, rows: any }>();
import { getCabinetInfo ,definiteOpening} from '../../../../../api/index'
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
const borrowPeople = ref('');
const borrowNum = ref(0);
const borrowDay = ref(0)
const route = useRoute();
const close = () => {
    emits('close');
}

const confirm = () => {
    // 提交请领申请
    if (borrowPeople.value == '') {
        ElMessage.error('请输入请领人');
        return;
    }

//   return
    getCabinetInfo(props.rows.cabinetId).then((res: any) => {
        console.log(props.rows)
        console.log(props.rows.storageLocation)
        const infos = {
            size: [res.data.storey * 1, res.data.joint * 1],
            name: res.data.name,
            boxs: [{ storey: props.rows.storey * 1, joint: props.rows.joint * 1, cabinetName:  props.rows.storageLocation}],
            // boxs: [{ storey: props.rows.storey * 1, joint: props.rows.joint * 1, cabinetName: res.data.name + props.rows.storey * 1 + '排' + props.rows.joint * 1 + '列' }],
            borrowNum: borrowNum.value,
            receiveUser: borrowPeople.value,
            documentUrl: route.params.img,
            receiveDay: borrowDay.value,
            drawId: props.rows.drawerId,
            cabinetId: props.rows.cabinetId
        }
        definiteOpening({region:props.rows.region,arrange:props.rows.arrange,joint:props.rows.joint,storey:props.rows.storey,side:props.rows.side,ipAddress:props.rows.ipAddress}).then((res:any)=>{
            if(res.code === 200) {
                ElMessage.success(res.msg)
            } else {
                ElMessage.error(res.msg)
            }
        })
        emits('confirm', infos);
    })




    // 查询柜子大小，显示柜子


}
</script>

<style scoped lang="less">
.footer {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.items {
    height: 40px;
    display: flex;
    align-items: center;
    color: #fff;
}

.label-info {
    display: inline-block;
    width: 100px;
}
.redIcon{
    &::before{
      content: "*";
      color: red;
      margin-right: 10px;
    }
}
</style>